import React from 'react'
import { Form, Input, Button } from 'antd';
import { Checkbox } from 'antd';
import {
    withRouter
} from 'react-router-dom'
import {
    login, regis
} from '../api/index'
import '../App.css'

function Login(props) {
    let userRef = null;
    const onFinish = (values) => {
        login(values).then(res => {
            if (res.data) {
                alert(res.data.msg)
            }
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('id', res.data.data.id)
            localStorage.setItem('username', res.data.data.username)
            props.history.push('/index/my')
        })
    }
    const register = () => {
        userRef.validateFields().then((useDate) => {
            regis(useDate).then((res) => {
                if (res.data.code === "001") {
                    alert("注册成功")
                } else {
                    alert("账号已存在")
                }
            })
        }).catch((err) => {
            console.log(err);

        })
    }
    const onChange = (e) => {
        console.log(`checked = ${e.target.checked}`);
    }
    const back = () => {
        window.history.back(-1)
    }
    return (
        <div className='login_one'>
            <div className="can" onClick={() => { back() }}>取消</div>
            <div className='main'>
                <div className="login">
                    <h3>登录美洽医疗</h3>
                    <div className="log_int">
                        <Form
                            name="basic"
                            onFinish={onFinish}
                            ref={(ref) => {
                                userRef = ref
                            }}
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[{ required: true, message: '请输入账号' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入密码' }]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <br />
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    登录
                            </Button>&emsp;
                            <Button type="primary" onClick={() => register()} >
                                    注册
                            </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="log_bott">
                        <Checkbox onChange={onChange}><p>我已阅读并同意<span>《春雨医生用户协议》《隐私政策》</span>，未注册将自动完成账户注册</p></Checkbox>
                    </div>
                </div>
            </div>

        </div>

    )
}

export default withRouter(Login)
